<template>
	<div>
		<h2 v-changeSty="{color:'red',backgroundColor:'blue'}">我是demo1</h2>
		<h2 v-jspang="{color:'blue'}">{{count}}</h2>
		<button @click="add">add</button>
        <input type="text" name="" v-focus>
        <!-- <author></author> -->
        <!-- vue.set()的用法说明 -->
        <p v-for="item in items" :key="item.id">
        {{item.message}}

    </p>
    <button class="btn" @click="btn2Click()">动态赋值</button><br/><br/>
    <button class="btn" @click="btn3Click()">为data新增属性</button>
    <h3>{{filterData | capitalize}}</h3>
    <h2>{{filterData1 | capitalize1}}</h2>
    <h2 :id="filterData1 | capitalize1">v-bind绑定 中使用过滤器</h2>
   <!--  在这个例子中，capitalize 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 capitalize1，将 capitalize 的结果传递到 capitalize1 中。 -->
    <h3>{{filterData | capitalize | capitalize1}}</h3>
    <!-- 下面过滤器接受了三个参数  第一个是filterData 第二个 是a 第三个是b -->
    <h3>{{filterData | capitalize('a','b')}}</h3>

     <Demo2 @chang = "consol">
	    <template slot = "heard">
	    	<h1>我是头部</h1>
	    </template>
	    <template slot = "main">
	    	<h1>我是main主要内容</h1>
	    </template>
	    <template slot = "foot">
	    	<h1>我是foot的内容</h1>
	    </template>   
	    <template  slot-scope = "data">
	    	 <h1>{{data}}</h1>
	    	 <h1>{{data.dataObj.num}}</h1>
	    </template> 
	   <!--  <template slot-scope = "data">
	    	<h1>{{data}}</h1>
		    <h2>{{data.dataDefault.age}}</h2>    
	    </template> -->
	    
     </Demo2>

	</div>
</template>
<script type="text/javascript">
 import Demo2 from './demo2'
	export default{
		data(){
			return{
			
			 filterData1:'brinding',
			 filterData:'lxy is a helo',
              count:0,
              binding:{
              	value:'red'
              },
              items:[
                {message:"Test one",id:"1"},
                {message:"Test two",id:"2"},
                {message:"Test three",id:"3"}
            ]

			}
		},
		components:{
			Demo2
		},
		//局部过滤器
		filters:{
			//过滤器只能用在双括号差值或者v-bind绑定 其中 后者vue2+才能支持
          capitalize(value){
          	//过滤器让首字母大写
            if(!value) return ''
              value = value.toString()
              return value.charAt(0).toUpperCase() + value.slice(1)	
          }
		},
		computed:{
          getCount(){
        
          }
		},
		directives: {
		  //自定义局部组件的用法
		  focus: {
		    // 指令的定义
		    inserted: function (el) {
		      el.focus()
		    }
		  },
		  changeSty :{
		  	bind:function(el,binding){
		  		console.log(binding)
		  		el.style ='color:'+ binding.value.color
		  		el.style.backgroundColor =binding.value.backgroundColor
		  	}
		  }
		},
		methods:{
			add(){
              this.count++
			},
			addOut(){

			},
			btn2Click:function(){
				  // 由于Javascript的限制，Vue不能自动检测以下变动的数组。
      //            *当你利用索引直接设置一个项时，vue不会为我们自动更新。
      //            *当你修改数组的长度时，vue不会为我们自动更新。
                  
				//数据改变了 但是视图没有更新
				// this.items[0]={message:"Change Test",id:'10'}
				// console.log(this.items)
				// 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')
                //Vue methods中的this 指向的是Vue的实例，这里可以直接在this中找到items
               this.$set(this.items,0,{message:"Change Test",id:'10'})
            },
            btn3Click:function(){
                var itemLen=this.items.length;
                this.$set(this.items,itemLen,{message:"Test add attr",id:itemLen});
            },
            consol(){
            	alert('我是父组件绑定的事件')
            }
		}
	}
</script>
<style type="text/css">
	
</style>